/* 
  学习目标：setState小结
  1. setState({}) ： 当你不需要获取旧值时，正常使用就可以
  
  写法2和3的作用： 立马获取到更新后的值
  区别：
    2. 👍setState(旧状态 => 返回新状态)
    3. 👎setState({}, 更新后的回调函数)
  原因：第三种写法会无限嵌套，难以阅读和维护
*/

import React from 'react';

export default class App extends React.Component {
  state = {
    count: 0,
  };

  handleClick = () => {
    this.setState((preState) => {
      document.title = preState.count + 1;

      return {
        count: preState.count + 1,
      };
    });

    // 👎 不推荐使用
    // this.setState({ count: this.state.count + 1 }, () => {
    //   // this.setState(
    //   //   {
    //   //     count: this.state.count + 2, //  1+2
    //   //   },
    //   //   () => {
    //   //     this.setState({ count: this.state.count + 3 }); // 3 +3
    //   //   }
    //   // );

    //   this.setState((preState) => {
    //     return {
    //       count: preState + 2,
    //     };
    //   });
    // });
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={this.handleClick}>点我修改数量</button>
      </div>
    );
  }
}
